import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Goods from '../views/Goods.vue'
import About from '../views/About.vue'
import detail from '../views/detail.vue'
import Collection from '../views/Collection.vue'
import shoppingCart from '../views/shoppingCart.vue'
import orders from '../views/orders.vue'
import ConfirmOrder from '../views/ConfirmOrder.vue'

Vue.use(VueRouter)

// 百度解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated:
//  Avoided redundant navigation 问题
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

const routes = [
  // 重定向
  {
    path: '*',
    redirect: "/",
  },
  // 主页
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 商品列表
  {
    path: '/goods',
    name: 'Goods',
    component: Goods
  },
  // 关于
  {
    path: '/about',
    name: 'About',
    component: About
  },
  // 商品详情
  {
    path: '/detail',
    name: 'detail',
    component: detail
  },
  // 收藏
  {
    path: '/Collection',
    name: 'Collection',
    component: Collection,
    meta: {
      loginFlag: true
    }
  },
  // 购物车
  {
    path: '/shoppingCart',
    name: 'shoppingCart',
    component: shoppingCart,
    meta: {
      loginFlag: true
    }
  },
  // 订单
  {
    path: '/orders',
    name: 'orders',
    component: orders,
    meta: {
      loginFlag: true
    }
  },
  // 确认订单
  {
    path: '/ConfirmOrder',
    name: 'ConfirmOrder',
    component: ConfirmOrder,
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


import store from "../store/index"

//路由守卫
router.beforeEach((to, from, next) => {
  //如果要去的路由地址meta属性存在loginFlag属性那么就需要进行登录鉴权
  if (to.meta.loginFlag && !store.getters.userInfo) {
    //如果当前vuex中存在userInfo那么就表示用户登录了,否则就是没有登录
    //展示登录对话框
    store.commit("setShowLogin", true)
    return next(false)
  }
  next()
})



export default router